<template>
  <div>
    <el-form>
      <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="编码">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
    </el-form>

    <el-cascader :options="options" :props="{ expandTrigger: 'hover'}"></el-cascader>

    <div class="left-bottom">
      <div class="floor-wide">
        <div class="arrow-icon" @click="upfloor()">
          <img src="@/assets/icons/arrow-up.svg" />
        </div>
        <div class="floor-list" ref="floorList">
          <div
            v-for="(item,index) in floors"
            :class="{'single-pick': item.isPick}"
            :key="index"
            class="floor-single"
            @click="pickFloor(item,index)"
          >{{item.floor}}</div>
        </div>
        <div class="arrow-icon" @click="downfloor()">
          <img src="@/assets/icons/arrow-down.svg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {

  },
  mounted() {
    var me = this;
    this.$axios.all([me.getForm(), me.getTree()])
      .then(me.$axios.spread((formRes, treeRes) => {
        console.log('form', formRes)
        console.log('tree', treeRes)
        this.form = formRes.data;
        this.options = treeRes.data;
      }))

    //初始化状态
    this.$refs.floorList.scrollTop = this.$refs.floorList.scrollHeight;
    this.floors[this.floors.length - 1]['isPick'] = true;
    this.recordNo = this.floors.length - 1;
  },
  data() {
    return {
      options: [],
      form: {},
      recordNo: Number,
      floors: [{
        floor: 'L6',
        isPick: false
      },
      {
        floor: 'L5',
        isPick: false
      },
      {
        floor: 'L4',
        isPick: false
      },
      {
        floor: 'L3',
        isPick: false
      },
      {
        floor: 'L2',
        isPick: false
      },
      {
        floor: 'L1',
        isPick: false
      }]
    }
  },
  methods: {
    getForm() {
      return this.$http.get('/formData')
    },
    getTree() {
      return this.$http.get('/treeData')
    },
    pickFloor(item, index) {
      if (this.recordNo && this.recordNo == index) {
        return;
      }
      if (this.recordNo || this.recordNo == 0) {
        this.floors[this.recordNo]['isPick'] = false;
      }
      item.isPick = true;
      this.recordNo = index;
    },
    upfloor() {
      this.recordNo = this.recordNo - 1;
      let num = this.floors.length - (this.recordNo + 1);
      let once = this.$refs.floorList.scrollHeight / this.floors.length;
      console.log('num:' + num)
      this.$refs.floorList.scrollTop = this.$refs.floorList.scrollHeight - once * num;
    },
    downfloor() {

    }
  }
}
</script>